<template>
    <Dashboard :menu="menu">
        <el-row>
            <el-row>
                <el-button type="primary" size="medium" @click="addFee">新增</el-button>
            </el-row>
            <el-table :data="feeData" stripe style="margin-top:24px">
                <el-table-column prop="name" label="名称" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop="" label="计费方式" header-align="center" align="center">
                </el-table-column>
                <el-table-column label="创建时间" header-align="center" align="center" width="150">
                    <template slot-scope="scope">
                        <el-row>{{format(scope.row.created_at)}}</el-row>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" header-align="center" align="center">
                    <template slot-scope="scoped">
                        <el-row style="font-weight:700;color:#19be6b" v-if="scoped.row.status">开启</el-row>
                        <el-row style="font-weight:700;color:#f50" v-else>关闭</el-row>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" header-align="center" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="feeEdit(scope.row)">编辑</el-button>
                        <el-button type="text" size="mini" @click="feeStatus(scope.row)">{{scope.row.status?'关闭':'开启'}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row style="margin:24px 0">
                <el-col :span="24" style="text-align:right">
                    <el-pagination background layout="total,prev,pager,next" :total="pagination.rowCount" :page-size="pagination.pageSize" @current-change="changePage"></el-pagination>
                </el-col>
            </el-row>
        </el-row>
    </Dashboard>
</template>

<script>
import Dashboard from "./../../../components/Dashboard.vue";
export default {
    components: {
        Dashboard
    },
    data() {
        return {
            menu: [
                {
                    name: "运费管理",
                    icon: "icon-dingdan",
                    sub: [
                        {
                            name: "运费管理",
                            url: "/shop/fee"
                        }
                    ]
                }
            ],
            feeData: [],
            pagination: {},
        };
    },
    async asyncData({ app }) {
        let data = {};
        //运费列表
        const res = await app.$axios.$get(
            "/api/shop/home/shop/plugin/fee/index"
        );
        if (res && res.errmsg === "ok") {
            data.feeData = res.data.data;
            data.pagination = res.data.pagination;
        }
        return data;
    },
    methods: {
        //运费列表
        async getData() {
            let url = `/api/shop/home/shop/plugin/fee/index?page=${
                this.pagination.page
            }`;
            const res = await this.$axios.$get(url);
            if (res && res.errmsg === "ok") {
                this.feeData = res.data.data;
                this.pagination = res.data.pagination;
            }
        },
        changePage(page) {
            this.pagination.page = page;
            this.getData();
        },
        addFee() {
            this.$router.push("/shop/fee/edit");
        },
        feeEdit(row) {
            this.$router.push({
                path: "/shop/fee/edit",
                query: {
                    id: row.id
                }
            });
        },
        //开启关闭
        async feeStatus(row) {
            let status = row.status ? 0 : 1;
            const res = await this.$axios.$get(
                `/api/shop/home/shop/plugin/fee/update?id=${row.id}&status=${status}`
            );
            if (res && res.errmsg === "ok") {
                this.$message.success(status ? "已开启" : "已关闭");
                this.getData();
            }
        }
    }
};
</script>
